<!-- eslint-disable vue/multi-word-component-names -->
<template>
        <RouterView/>
        <div class="swiper">
            <div class="header">
                <div class="header-one-box">
                    <div class="time">
                    <span>添加时间</span>
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :size="size"
                    :style="{width:'344px',height:'40px'}"
                    />
                </div>
                <div class="person">
                    <span>上传人</span>
                    <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                </div>
                </div>
            <div class="header-two-box">
                <div class="search">
                    <span>手动搜索</span>
                    <el-input v-model="input" placeholder="请输入轮播图名称或者关键词" :style="{width:'364px',height:'40px'}"/>
                    <el-button type="success" color='#2bc17b'>搜索</el-button>
                    <el-button type="success" plain color='#2bc17b'>重置</el-button>
                </div>
            </div>
            </div>

            <div class="content">
                <div class="content-box">
                    <div class="wordlist">
                    <h4>轮播图列表</h4>
                    <p @click='gotoaddswiper'>
                        <el-icon><DocumentCopy /></el-icon>
                        添加轮播图
                    </p>
                </div>
                <el-table :data="tableData" border style="width: 1104px" @selection-change="handleSelectionChange"   ref="multipleTableRef" stripe>
                    <el-table-column type="selection" width="55" align='center'/>
                    <el-table-column prop="name" label="名称" align='center'/>
                    <el-table-column prop="picture" label="缩略图" align='center' />
                    <el-table-column prop="explain" label="说明" align='center' />
                    <el-table-column prop="person" label="上传人" align='center'/>
                    <el-table-column prop="addtime" label="添加时间" align='center'/>
                    <el-table-column  label="操作"  align='center'>
                        <span class='compile'>编辑</span>
                        <span class='del'>删除</span>
                    </el-table-column>
                </el-table>
                </div>
                
                
            </div>
            <div class="footer">
                <div class='left'>
                    <el-checkbox  label="全选" size="large" @click="toggleSelection(tableData)"/>
                    <span>批量导出</span>
                </div>
                <el-config-provider :locale="locale">
                    <el-pagination
                        v-model:current-page="currentPage1"
                        :page-size="100"
                        :small="small"
                        :disabled="disabled"
                        :background="background"
                        layout="total, prev, pager, next,jumper"
                        :total="1000"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </el-config-provider>
            </div>
            
        </div>
        
        
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import {ElTable} from 'element-plus'
//import { toRefs } from '@vue/reactivity';
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ref,toRefs  } from 'vue'
import {  useRouter } from "vue-router"
//import { ref } from 'vue'
//当前页数
//let  currentPage=1
//let pageSize=10//每页显示条数
//let total=0//总条数
const router = useRouter()
const  instance = getCurrentInstance();
const multipleTableRef = ref(null);
const multipleSelection  = ref([]);
let locale=zhCn
const tableData = [
    {
        name: '轮播图',
        picture:'1',
        explain: '轮播图',
        person:"www",
        addtime: 'No. 189, Grove St, Los Angeles',
    },
    {
        name: '轮播图',
        picture:'2',
        explain: '轮播图',
        person:"www",
        addtime: 'No. 189, Grove St, Los Angeles',
    }
]
let background=true
function gotoaddswiper(){
    //console.log(1)
    router.push("/addswiper")
}
function handleSelectionChange(val){
        multipleSelection.value = val;
    }
function toggleSelection(rows){
    var ultipleTabInstance = toRefs(instance.refs.multipleTableRef)
        console.log(ultipleTabInstance.toggleRowSelection);
            if(rows){
            rows.forEach(row => {
                console.log(ultipleTabInstance.toggleRowSelection.value)
                ultipleTabInstance.toggleRowSelection.value(row, true)
                //multipleTableRef.value!.toggleRowSelection(row, undefined)
            });
            }
            else{
            ultipleTabInstance.clearSelection.value()
            }
}
</script>

<style scoped lang="less">
.swiper{
    background: rgba(245, 249, 250, 1);
    .header{
        width:100%;
        box-sizing: border-box;
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        padding:35px 0 35px 47px;
        margin-bottom:32px;
        background:rgba(255, 255, 255, 1);
        .header-one-box{
            display:flex;
            flex-wrap:wrap;
            .time{
            span{
                font-size:14px;
                text-align:left;
                font-weight: 400;
                margin-right:8px;
            }
        }
        .person{
            flex-grow:1.5;
            margin-left:50px;
            span{
                font-size:14px;
                text-align:left;
                font-weight: 400;
                margin-right:8px;
            }
        }
        }
        .header-two-box{
            display:flex;
            margin-top:20px;
            flex-wrap:wrap;
            .search{
                
            span{
                font-size:14px;
                text-align:left;
                font-weight: 400;
                margin-right:8px;
            }
            .el-button{
                margin-left:50px;
                color:white;
                width:76px;
                height:40px;
                &:last-child{
                    background:white;
                    margin-left:24px;
                    color:rgba(43, 193, 123, 1);
                }
            }
        }
        }
        
    }
    .content{
        width:100%;
        background:rgba(255, 255, 255, 1);
        
        box-sizing:border-box;
        .content-box{
            width:1184px;
            box-sizing:border-box;
            padding:35px 40px 35px 40px;
        }
        .wordlist{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:28px;
            h4,p{
                font-size:16px;
            }
            p{
                color:#2bc17b;
            }
        }
        .compile{
            color:#2bc17b;
            font-size:14px;
        }
        .del{
            color: rgba(251, 84, 81, 1);
            font-size:14px;
            margin-left:15px;
        }
    }
    .footer{
        width:1184px;
        box-sizing:border-box;
        padding:35px 40px 35px 40px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        background:rgba(255, 255, 255, 1);
        span{
            color:#2bc17b;
            margin-left:10px;
            font-size:14px;
        }
        .left{
            text-align:center;
            line-height:14px;
        }
        .el-pagination{
            width:636px;
        }
        
        :deep(.el-pagination.is-background .el-pager li){
            width:40px;
            height:40px;
        }
        :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
                background-color: #2bc17b !important; //修改默认的背景色
                width:40px;
                height:40px;
                color:white;
        }
    }
}
</style>